<script lang="ts" setup>
import ActivityViewCharts from "./ActivityViewCharts.vue";
import { ElMessageBox, ElNotification } from "element-plus";
import AuditDialog from "@/components/audit/AuditDialog.vue";
import previewActDialog from "./components/previewActDialog.vue";
import testCustomerDialog from "./components/testCustomerDialog.vue";
import PreviewQrcode from "./components/PreviewQrcode.vue";
import AuditDetail from "./step/components/AuditDetail.vue";
import {
  updActivityStatusApi,
  delActivityByIdApi,
  activityPageApi,
  authInsApi,
  queryActHintListApi,
  saveHintMsgApi,
  queryQuestionGroupTreeApi,
  delQuestionGroupApi,
  saveQuestionGroupApi,
  activityPreview,
} from "@/api/activity";
import { activityType } from "@/config/dictionary";
import { stringify } from "querystring";
import exportData from "@/components/exportData/exportData.vue";
import NoticeConfigDialog from "./activityNotice/ConfigDialog.vue"
const router = useRouter(),
  store = useStore(),
  internalInstance = getCurrentInstance();
const showExportData = ref(false);

const tableForm = ref<any>({
  name: "",
  status: "",
  ssTime: "",
  seTime: "",
  esTime: "",
  eeTime: "",
}),
  activeStartTime = ref([]),
  activeEndTime = ref([]),
  dialogVisible = ref(false),
  qrcodeURL = ref(""),
  hintForm = ref({}),
  hintDialogVisible = ref(false),
  submitLoading = ref(false),
  layoutSpan = ref(6),
  showType = ref(""), // 需置空，否则v-infinite 指令会报错
  activityList = ref<Array<any>>([]),
  loadFinish = ref(false),
  pager = ref({
    showCount: 30,
    currentPage: 1,
  }),
  showGroupDialog = ref(false),
  showTestCustomerDialog = ref(false),
  testCustomerId = ref(0),
  groupDialogTitle = ref(""),
  groupFormData: any = ref({
    parentId: "",
    nodeType: 0,
  }),
  treeData = ref<Array<any>>([]),
  treeSelectData = ref<Array<any>>([]),
  parentTreeSelectData = ref<Array<any>>([]),
  auditForm: any = ref({}),
  showAuditDialog = ref(false),
  showPreviewActDialog = ref(false),
  auditUserList = ref<Array<any>>([]),
  setGroupDialog = ref(false),
  batchGroupForm: any = ref({});
const tableRef = ref(),
  hintFormRef = ref(),
  groupFormRef = ref(),
  LeftTreeRef = ref(),
  auditFormRef = ref();

const filters = internalInstance?.appContext.config.globalProperties.$filters;
// const btnList = JSON.parse((sessionStorage as any).getItem("ACTIVITYBtn"));
const btnList = JSON.parse((localStorage as any).getItem("ACTIVITYBtn"));
const updatePermission = (btnList || []).some((role: any) => role === "2015");
const adminType = store.state.user.adminType;

const rules = {
  name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
};

let tableData: Array<any> = [],
  selection: Array<any> = [];

watch(activeStartTime, (val: Array<any>) => {
  if (val && val.length === 2) {
    tableForm.value.ssTime = val[0];
    tableForm.value.seTime = val[1];
  } else {
    tableForm.value.ssTime = "";
    tableForm.value.seTime = "";
  }
});

watch(activeEndTime, (val: Array<any>) => {
  if (val && val.length === 2) {
    tableForm.value.esTime = val[0];
    tableForm.value.eeTime = val[1];
  } else {
    tableForm.value.esTime = "";
    tableForm.value.eeTime = "";
  }
});

const navigateTo = (name: string, params: any = {}) => {
  router.push({ name, params });
};

const handleDelete = ({ id, name }: any) => {
  ElMessageBox.confirm(`确认删除活动【${name}】吗？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const rs = await delActivityByIdApi({ ids: [id], names: [name] });
    if (rs.code == 200) {
      ElNotification.success({
        message: "删除成功",
      });
      search();
    }
  });
};
const handleBack = () => {
  store.commit('SETSHOWVIEWACT', false)
  store.commit('SETCURRENTACTID', '')
  searchActivity(false)
}
const showViewAct = computed(() => {
  return store.state.activity.showViewAct
})
const currentId = computed(() => {
  return store.state.activity.currentActId
})
const handleCommand = (command: string, row: any) => {
  if (command === "delete") {
    handleDelete(row);
  } else if (command === "hint") {
    onHintMsg(row.id);
  } else if (command === "goods") {
    navigateTo("ActivityPrize", { id: row.id });
  } else if (command === "audit") {
    currentRowInfo.value = row
    onlineAudit(row);
  } else if (command === "vote") {
    navigateTo("ActivityVoteWork", { id: row.id });
  } else if (command === "copy") {
    handleCopy(row);
  } else if (command === "ticket") {
    toTicket(row);
  } else if (command === "signup") {
    navigateTo("toSignUpDetail", { id: row.id });
  } else if (command === "view") {
    store.commit('SETSHOWVIEWACT', true)
    store.commit('SETCURRENTACTID', row.id)
  } else if (command === 'notice') {
    currentRowInfo.value = row
    showNotice.value = true
  } else if (command == 'testNameList') {
    showTestCustomerDialog.value = true
    testCustomerId.value = row.preGroup
  }
};

const search = async () => {
  if (showType.value === "list") {
    tableRef.value.search();
  } else {
    await searchActivity(true);
  }
};
const currentPreviewActId = ref(0);
let changeStatusResolve: (val: boolean | PromiseLike<boolean>) => void = (val) => {
  return val
}

const sureCustomer = (rs) => {
  if (rs) {
    changeStatusResolve(true)
    ElNotification.success({
      message: `已预上线`,
    });
    search();
  }
  else {
    changeStatusResolve(false)
  }
};
const searchActivity = async (refresh: boolean = false) => {
  if (store.state.activity.showViewAct) {
    return
  }
  if (refresh) {
    pager.value.currentPage = 1;
    activityList.value = [];
    loadFinish.value = false;
  }
  const rs = await activityPageApi(
    Object.assign({}, tableForm.value, pager.value)
  );
  if (rs.code == 200) {
    let page = (rs as any).page;
    if (page.currentPage >= page.totalPage) {
      loadFinish.value = true;
    }
    pager.value.currentPage = pager.value.currentPage + 1;
    activityList.value = activityList.value.concat(rs.payload);
  }
};

const changeShowType = (val: string) => {
  localStorage.setItem("MERCHANTACTIVITY_CARDTYPE", val);
  if (val === "list") {
    // tableRef.value.search(); // LayoutTable mount 后会自动加载
  } else {
    searchActivity(true);
  }
};



function changeStatus(): Promise<boolean> {
  let detail = this;
  let title = detail.status == 1 || detail.status == 2 ? "下线" : "预上线";
  console.log(detail)
  currentPreviewActId.value = detail.id
  if (title == '预上线') {
    showPreviewActDialog.value = true;
    return new Promise((resolve, reject) => {
      changeStatusResolve = resolve
    })
  } else {
    return new Promise(async (resolve, reject) => {
      const rs = await updActivityStatusApi({
        status: detail.status == 1 || detail.status == 2 ? 0 : 1,
        id: detail.id,
        name: detail.name,
      });
      if (rs.code == 200) {
        resolve(true);
        ElNotification.success({
          message: `已${title}`,
        });
        search();
      } else resolve(false);
    });
  }
}

const previewActivity = async (row: any) => {
  let previewUrl = "";
  let res = await activityPreview({ id: row.id });
  if (res.code === 200) {
    previewUrl = res.payload.previewUrl;
    if (import.meta.env.MODE === "development") {
      const index = previewUrl.lastIndexOf("/user/");
      const longUrl = `${(window as any).VUE_APP_URL[import.meta.env.MODE].activePreviewPath
        }${previewUrl.substring(index + 6, previewUrl.length)}`;
      qrcodeURL.value = longUrl;
      dialogVisible.value = true;
    } else {
      qrcodeURL.value = previewUrl;
      dialogVisible.value = true;
    }
  } else {
    ElNotification.error({
      message: "生成预览链接失败",
    });
  }
};

const handleCopy = (row: any) => {
  navigateTo("ActivityAdd", { id: row.patternId, copyId: row.id });
};

const toTicket = (row: any) => {
  router.push(`/activity/activityTicket/${row.id}`);
};

const onHintMsg = async (actId: number | string) => {
  hintDialogVisible.value = true;
  let types = ["COMMON", "SIGN", "SHARE", "LOTTERY", "SALE", "TASK"];
  const rs = await queryActHintListApi({
    actId,
    types,
  });
  if (rs.code == 200) {
    hintForm.value = { actId, hintMsgList: rs.payload, types };
  }
};

const saveHint = () => {
  hintFormRef.value.validate(async (valid: any) => {
    if (valid) {
      submitLoading.value = true;
      const rs = await saveHintMsgApi(hintForm.value);
      if (rs.code == 200) {
        ElMessage({
          showClose: true,
          message: "保存成功",
          type: "success",
        });
      }
      submitLoading.value = false;
      hintDialogVisible.value = false;
    } else {
    }
  });
};

// 获取左侧的树结构
const getTagGroupTree = async () => {
  let rs = await queryQuestionGroupTreeApi({
    scene: "ACTIVITY",
  });
  if (rs.code === 200) {
    treeData.value = [
      {
        id: "all",
        name: "全部",
        children: [],
      },
    ].concat(rs.payload);
  }
};

// 获取有下级的树结构
const getParentTagGroupTree = async () => {
  let rs = await queryQuestionGroupTreeApi({
    scene: "ACTIVITY",
    nodeType: 1,
  });
  if (rs.code === 200) {
    parentTreeSelectData.value = rs.payload;
  }
};

// 获取节点id
const getTreeNodeId = (data: any) => {
  if (data.nodeType == 1 && data.children) {
    LeftTreeRef.value.setCurrentKey(tableForm.value.groupId); // 设置选中
    return;
  }
  if (data.id == "all") {
    tableForm.value.groupId = "";
  } else {
    tableForm.value.groupId = data.id;
  }
  // if (showType.value === "card") searchActivity(true);
};

// 新增组
const createTagGroup = (parent?: any) => {
  groupDialogTitle.value = "新建分组";
  if (groupFormRef.value) {
    groupFormRef.value.resetFields();
    groupFormData.value = {
      parentId: parent ? parent.id : "",
      nodeType: 1,
    };
  }
  if (parentTreeSelectData.value.length == 0) getParentTagGroupTree();
  showGroupDialog.value = true;
};

// 编辑组
const editGroup = async (data: any) => {
  groupDialogTitle.value = `编辑分组【${data.name}】`;
  if (groupFormRef.value) {
    groupFormRef.value.resetFields();
  }
  groupFormData.value = {
    ...data,
    parentId: data.parentId ? data.parentId : "",
  };
  if (parentTreeSelectData.value.length == 0) getParentTagGroupTree();
  showGroupDialog.value = true;
};

const delGroup = (data: any) => {
  ElMessageBox.confirm(`是否删除【${data.name}】`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let rs = await delQuestionGroupApi({ id: data.id, scene: "ACTIVITY" });
    if (rs.code === 200) {
      ElMessage.success("删除成功");
      if (data.id == tableForm.value.groupId) {
        tableForm.value.groupId = "";
      }
      LeftTreeRef.value.removeTreeNode(data); // 删除树节点的数据
    }
  });
};

const submitGroupForm = () => {
  groupFormRef.value.validate(async (valid: any) => {
    if (valid) {
      submitLoading.value = true;
      let rs = await saveQuestionGroupApi({
        ...groupFormData.value,
        scene: "ACTIVITY",
      });
      if (rs.code == 200) {
        showGroupDialog.value = false;
        ElMessage.success(
          `${groupFormData.value["id"] ? "编辑" : "添加"}分类成功`
        );
        getTagGroupTree();
        getParentTagGroupTree();
      }
      submitLoading.value = false;
    }
  });
};

const auditVisible = ref(false)
const onlineAudit = (row: any) => {
  //审核中仅看详情
  if (row.checkStatus == 1) {
    auditVisible.value = true
  } else {
    let href = window.location.href.split("#/")[0];
    if (import.meta.env.MODE === "development") {
      href = "https://marketingtest.lianhaikeji.com/merchant/";
    }
    auditForm.value = {
      submitTitle: `【${row.name}】上线审核`,
      relationName: row.name,
      relationId: row.id,
      pageRouter: `${href}#/activity/list/detail/${row.id}`,
      relationType: "activity_online",
      submitInfo: JSON.stringify({
        活动名称: row.name,
        开始时间: filters.dateFormat(row.startTime),
        结束时间: filters.dateFormat(row.endTime),
      }),
    };
    showAuditDialog.value = true;
  }
};

// 批量修改分组
const toSetGroup = () => {
  if (!selection.length) {
    ElMessage.warning("请先选择需要修改的分组");
    return;
  }
  setGroupDialog.value = true;
};

const onTableLoaded = (list: Array<any>) => {
  tableData = list;
  nextTick(() => {
    if (showType.value === "list") setSelect();
  });
};

// 行选中切换
const onSelectChange = (rows: Array<any>, row: any) => {
  if (!row) return;
  let selectionIndex = selection.findIndex((item) => row.id == item.id);
  // 若存在则移除该数据
  if (selectionIndex >= 0) selection.splice(selectionIndex, 1);
  // 选中
  else {
    selection.push(row);
  }
};

// 全选
const oneSelectAll = (rows: Array<any>) => {
  rows.forEach((row) => {
    let index = selection.findIndex((item) => item.id == row.id);
    if (index < 0) selection.push(row);
  });
  if (rows.length == 0) {
    tableData.forEach((row) => {
      let index = selection.findIndex((item) => item.id == row.id);
      if (index >= 0) selection.splice(index, 1);
    });
  }
};

// 设置选中数据
const setSelect = () => {
  nextTick(() => {
    tableData.forEach((item) => {
      let index = selection.findIndex((row) => row.id == item.id);
      if (index >= 0) {
        tableRef.value.toggleRowSelection(item, true);
      } else {
        tableRef.value.toggleRowSelection(item, false);
      }
    });
  });
};

const onresize = () => {
  if (document.body.clientWidth <= 1800) layoutSpan.value = 6;
  else layoutSpan.value = 4;
};

// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    getTagGroupTree();
    if (tableForm.value.groupId != "") {
      tableForm.value.groupId = "";
    } else search();
  },
  {
    deep: true,
  }
);

//卡片时输入条件查询
watch(tableForm, () => {
  if (showType.value == 'card') {
    searchActivity(true);
  }
}, {

  deep: true,
})
onDeactivated(() => {
  store.commit('SETSHOWVIEWACT', false)
  store.commit('SETCURRENTACTID', '')
})

onMounted(() => {
  onresize();
  window.onresize = onresize;
  getTagGroupTree();
  const type = localStorage.getItem("MERCHANTACTIVITY_CARDTYPE");
  showType.value = type || "list";
  if (showType.value === "card") {
    searchActivity(true);
  }
});

onBeforeUnmount(() => {
  window.onresize = null;
  store.commit('SETSHOWVIEWACT', false)
  store.commit('SETCURRENTACTID', '')

});

/****通知配置**/
const showNotice = ref(false)
const currentRowInfo = ref({})
</script>
<script lang="ts">
export default {
  name: "ActivityList",
};
</script>
<template>
  <div>
    <MainContent title="活动管理" :inner-padding="false" :back="showViewAct" :back-func="showViewAct" @back="handleBack"
      :style-content="showViewAct ? { padding: 0 } : {}">
      <l-r-content-index v-show="!showViewAct">
        <template #title>
          <div class=" side-title-inner">
            活动分组
            <el-button type="primary" @click="createTagGroup">
              <el-icon>
                <Plus />
              </el-icon>
              <span style="margin-left: 10px">新增分组</span>
            </el-button>
          </div>
        </template>
        <template #side-content>
          <LeftTree ref="LeftTreeRef" :tree-data="treeData" :disable-select="false"
            :current-node-key="tableForm.groupId || 'all'" show-add="nodeType" :button-add="['2019']"
            :button-edit="['2010']" :button-del="['2011']" @getTreeNodeId="getTreeNodeId" @add="createTagGroup"
            @edit="editGroup" @del="delGroup" />
        </template>
        <MainContentSearchBarWrapper>
          <SearchBar inline :block="true">
            <template #normal>
              <el-form-item label="活动名称">
                <el-input v-model="tableForm.name" clearable placeholder="请输入活动名称" />
              </el-form-item>
              <el-form-item label="活动状态">
                <el-select v-model="tableForm.status" class="m-2" placeholder="请选择">
                  <el-option label="全部" value="" />
                  <el-option label="上线" :value="2" />
                  <el-option label="预上线" :value="1" />
                  <el-option label="下线" :value="0" />
                </el-select>
              </el-form-item>
            </template>
            <template #advantage>
              <el-form-item label="活动开始时间">
                <el-date-picker v-model="activeStartTime" type="datetimerange" value-format="x" range-separator="~"
                  start-placeholder="起始时间" end-placeholder="结束时间" />
              </el-form-item>
              <el-form-item label="活动结束时间">
                <el-date-picker v-model="activeEndTime" type="datetimerange" value-format="x" range-separator="~"
                  start-placeholder="起始时间" end-placeholder="结束时间" />
              </el-form-item>
            </template>
            <template #toolbar>
              <el-form-item>
                <el-button type="primary" @click="search">
                  查询
                </el-button>
                <el-button v-has="['2010']" type="primary" icon="plus" @click="navigateTo('ActivityHome')">
                  新增活动
                </el-button>
                <!-- TODO 加权限 -->
                <el-button type="primary" @click="showExportData = true">
                  导出
                </el-button>
              </el-form-item>
            </template>
          </SearchBar>
          <div class="toolBar">
            <!-- <div>
              <el-button type="primary" @click="toSetGroup"
                >批量修改分组</el-button
              >
            </div> -->
            <el-radio-group v-model="showType" @change="changeShowType">
              <el-radio-button label="card">
                卡片
              </el-radio-button>
              <el-radio-button label="list">
                列表
              </el-radio-button>
            </el-radio-group>
          </div>
          <template v-if="showType === 'list'">
            <LayoutTable ref="tableRef" url="activity/actPager" :param="tableForm" @select="onSelectChange"
              @select-all="oneSelectAll" @loaded="onTableLoaded">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="id" align="center" label="活动ID" min-width="80" />
              <el-table-column prop="insName" align="center" label="所属机构" min-width="100" />
              <el-table-column prop="name" align="center" label="活动名称" min-width="180" />
              <el-table-column align="center" label="活动状态" min-width="80">
                <template #default="scope">
                  <div v-if="updatePermission">
                    <ConfirmSwitch v-if="scope.row.status == 0 || scope.row.status == 1" v-model="scope.row.status"
                      :active-text="scope.row.checkStatus == 1 ? '审核中' : '预上线'" inactive-text="下线" :title="`确认${scope.row.status == 0 ? '预上线' : '下线'
                        }活动【${scope.row.name}】吗？`" :disabled="scope.row.checkStatus == 1 ? true : false"
                      :loading="scope.row.loading" :before-change="changeStatus.bind(scope.row)" />
                    <ConfirmSwitch v-else-if="scope.row.status == 2" v-model="scope.row.status"
                      :active-text="scope.row.checkStatus == 1 ? '审核中' : '上线'" inactive-text="下线" :active-value="2"
                      :title="`确认${scope.row.status == 2 ? '下线' : '上线'
                        }活动【${scope.row.name}】吗？`" :disabled="scope.row.checkStatus == 1 ? true : false"
                      :loading="scope.row.loading" :before-change="changeStatus.bind(scope.row)" />
                  </div>
                  <div v-else>
                    {{
                      scope.row.status == 2
                      ? "已上线"
                      : scope.row.status == 1
                        ? "预上线"
                        : "已下线"
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="createUserName" align="center" label="创建人" width="120" />
              <el-table-column align="center" label="活动时间" width="180">
                <template #default="scope">
                  {{ filters.dateFormat(scope.row.startTime, "YYYY-MM-DD") }}
                  至
                  {{
                    filters.dateFormat(scope.row.endTime, "YYYY-MM-DD")
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="更新时间" min-width="180">
                <template #default="scope">
                  {{
                    filters.dateFormat(scope.row.updateTime)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" min-width="140" fixed="right">
                <template #default="scope">
                  <el-button v-has="['2014']" type="primary" link size="small" @click="previewActivity(scope.row)">
                    预览
                  </el-button>
                  <el-button v-if="scope.row.checkStatus == 1" v-has="['2011']" type="primary" link size="small" @click="
                    navigateTo('ActivityEdit', {
                      id: scope.row.id,
                      mode: 'detail',
                    })
                    ">
                    查看
                  </el-button>
                  <el-button v-else v-has="['2011']" type="primary" link size="small" @click="
                    navigateTo('ActivityEdit', {
                      id: scope.row.id,
                      mode: 'edit',
                    })
                    ">
                    编辑
                  </el-button>
                  <el-dropdown placement="top" @command="handleCommand($event, scope.row)">
                    <div style="margin-left: 10px; cursor: pointer">
                      <!-- <el-icon :size="20"><More /></el-icon> -->
                      <el-button v-has="['2012', '2013', '2016', '2017', '2019', '20116', '20117']" type="primary" link
                        size="small">
                        更多
                      </el-button>
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if='scope.row.status == 1' command="testNameList"
                          style="padding:0 16px;justify-content: center">
                          <span v-has="['20118']" style="padding: 5px 0;">测试名单</span>
                        </el-dropdown-item>
                        <el-dropdown-item v-if="scope.row.status == 1" command="audit">
                          {{ scope.row.checkStatus == 0 ? "上线审核" : "查看审核" }}
                        </el-dropdown-item>
                        <el-dropdown-item style="padding:0 16px;justify-content: center;" command="copy">
                          <span v-has="['2013']" style="padding: 5px 0;">复制</span>
                        </el-dropdown-item>
                        <el-dropdown-item command="goods" style="padding:0 16px">
                          <span v-has="['2016']" style="padding: 5px 0;">商品管理</span>
                        </el-dropdown-item>
                        <el-dropdown-item v-if="scope.row.pageAreaTypes &&
                          scope.row.pageAreaTypes.find(
                            (item) => item.type == 9
                          )
                          " command="vote">
                          作品管理
                        </el-dropdown-item>
                        <el-dropdown-item v-if="scope.row.pageAreaTypes &&
                          scope.row.pageAreaTypes.find(
                            (item) => item.type == 7
                          )
                          " command="signup">
                          报名数据
                        </el-dropdown-item>
                        <el-dropdown-item command="hint" style="padding:0 16px;justify-content: center">
                          <span v-has="['2017']" style="padding: 5px 0;">提示语</span>
                        </el-dropdown-item>
                        <el-dropdown-item style="padding:0 16px" command="ticket">
                          <span v-has="['2019']" style="padding: 5px 0;">门票发放</span>
                        </el-dropdown-item>
                        <el-dropdown-item command="view" style="padding:0 16px">
                          <span v-has="['20116']" style="padding: 5px 0;">活动报表</span>
                        </el-dropdown-item>
                        <el-dropdown-item command="notice" style="padding: 0 16px;">
                          <span v-has="['20117']" style="padding:5px 0">通知配置</span>
                        </el-dropdown-item>
                        <el-dropdown-item style="padding:0 16px;justify-content: center" command="delete">
                          <span v-has="['2012']" style="padding:5px 0">删除</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </LayoutTable>
          </template>
          <template v-else-if="showType === 'card'">
            <div v-infinite-scroll="searchActivity" class="activity-card" :infinite-scroll-distance="100"
              :infinite-scroll-disabled="loadFinish" :infinite-scroll-immediate="false">
              <el-row>
                <el-col v-for="item in activityList" :span="layoutSpan" style="margin-bottom: 10px">
                  <el-card class="activity-item">
                    <div class="activity-img">
                      <div class="activity-img_container">
                        <!-- <img :src="item.coverUrl" alt="" /> -->
                        <el-image style="width: 100%; height: 100%" :src="item.coverUrl">
                          <template #error>
                            <div class="image-slot">
                              <el-icon><icon-picture /></el-icon>
                            </div>
                          </template>
                        </el-image>
                      </div>
                      <div class="activity-qrcode">
                        <div v-has="['2014']" class="preview-btn" @click="previewActivity(item)">
                          预览
                        </div>
                        <div class="footer">
                          <div v-if="item.checkStatus == 1" v-has="['2011']" class="footer-item" @click="
                            navigateTo('ActivityEdit', {
                              id: item.id,
                              mode: 'detail',
                            })
                            ">
                            <el-icon :size="20">
                              <View />
                            </el-icon>
                            <div>查看</div>
                          </div>
                          <div v-else v-has="['2011']" class="footer-item" @click="
                            navigateTo('ActivityEdit', {
                              id: item.id,
                              mode: 'edit',
                            })
                            ">
                            <el-icon :size="20">
                              <Edit />
                            </el-icon>
                            <div>编辑</div>
                          </div>
                          <div v-has="['2013']" class="footer-item" @click="handleCopy(item)">
                            <el-icon :size="20">
                              <CopyDocument />
                            </el-icon>
                            <div>复制</div>
                          </div>
                          <div class="footer-item">
                            <el-dropdown placement="top" @command="handleCommand($event, item)">
                              <div>
                                <el-icon :size="20">
                                  <More />
                                </el-icon>
                                <div>更多</div>
                              </div>
                              <template #dropdown>
                                <el-dropdown-menu>
                                  <el-dropdown-item v-if='item.status == 1' command="testNameList"
                                    style="padding:0 16px;justify-content: center">
                                    <span v-has="['20118']" style="padding: 5px 0;">测试名单</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item v-if="item.status == 1" command="audit">
                                    {{item.checkStatus == 1? "查看审核": "上线审核"}}
                                  </el-dropdown-item>
                                  <el-dropdown-item command="goods" style="padding:0 16px">
                                    <span v-has="['2016']" style="padding: 5px 0;">商品管理</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item v-if="item.pageAreaTypes &&
                                    item.pageAreaTypes.find(
                                      (item) => item.type == 9
                                    )
                                    " command="vote">
                                    作品管理
                                  </el-dropdown-item>
                                  <el-dropdown-item v-if="item.pageAreaTypes &&
                                    item.pageAreaTypes.find(
                                      (item) => item.type == 7
                                    )
                                    " command="signup">
                                    报名数据
                                  </el-dropdown-item>
                                  <el-dropdown-item command="hint" style="padding:0 16px;justify-content: center">
                                    <span v-has="['2017']" style="padding: 5px 0;">提示语</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item style="padding:0 16px" command="ticket">
                                    <span v-has="['2019']" style="padding: 5px 0;">门票发放</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item command="view" style="padding:0 16px">
                                    <span v-has="['20116']" style="padding: 5px 0;">活动报表</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item command="notice" style="padding: 0 16px;">
                                    <span v-has="['20117']" style="padding: 5px 0;">通知配置</span>
                                  </el-dropdown-item>
                                  <el-dropdown-item style="padding:0 16px;justify-content: center" command="delete">
                                    <span v-has="['2012']" style="padding: 5px 0;">删除</span>
                                  </el-dropdown-item>
                                </el-dropdown-menu>
                              </template>
                            </el-dropdown>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="activity-info">
                      <div class="activity-info_line1">
                        <el-tooltip effect="dark" :content="item.name" placement="top">
                          <div class="activity-name">
                            {{ item.name }}
                          </div>
                        </el-tooltip>
                        <div class="activity-status">
                          <div v-if="updatePermission">
                            <ConfirmSwitch v-if="item.status == 0 || item.status == 1" v-model="item.status"
                              :active-text="item.checkStatus == 1 ? '审核中' : '预上线'" inactive-text="下线" :title="`确认${item.status == 0 ? '预上线' : '下线'
                                }活动【${item.name}】吗？`" :disabled="item.checkStatus == 1 ? true : false"
                              :loading="item.loading" :before-change="changeStatus.bind(item)" />
                            <ConfirmSwitch v-else-if="item.status == 2" v-model="item.status"
                              :active-text="item.checkStatus == 1 ? '审核中' : '上线'" inactive-text="下线" :active-value="2"
                              :title="`确认${item.status == 2 ? '下线' : '上线'
                                }活动【${item.name}】吗？`" :disabled="item.checkStatus == 1 ? true : false"
                              :loading="item.loading" :before-change="changeStatus.bind(item)" />
                          </div>
                          <div v-else>
                            {{
                              item.status == 2
                              ? "已上线"
                              : item.status == 1
                                ? "预上线"
                                : "已下线"
                            }}
                          </div>
                        </div>
                      </div>
                      <div style="white-space: nowrap">
                        {{ filters.dateFormat(item.startTime, "YYYY-MM-DD") }}
                        至
                        {{ filters.dateFormat(item.endTime, "YYYY-MM-DD") }}
                      </div>
                      <div>创建人：{{ item.createUserName }}</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-empty v-if="activityList.length == 0" description="暂无数据" />
          </template>
        </MainContentSearchBarWrapper>
      </l-r-content-index>
      <div v-if="showViewAct">
        <ActivityViewCharts :id="currentId" />
      </div>
    </MainContent>
    <PreviewQrcode v-model:show="dialogVisible" :link="qrcodeURL" />
    <!-- 提示语配置 -->
    <Dialog v-model="hintDialogVisible" title="提示语配置" :width="700" :loading="submitLoading" @confirm="saveHint">
      <el-form ref="hintFormRef" :model="hintForm" label-width="0">
        <el-table :data="hintForm.hintMsgList" border style="width: 100%" max-height="500">
          <el-table-column prop="hintScene" label="场景" />
          <el-table-column label="提示语">
            <template #default="props">
              <el-form-item :prop="`hintMsgList.${props.$index}.hintMsg`" :rules="[
                {
                  required: true,
                  message: '请填写提示语',
                  trigger: 'blur',
                },
              ]">
                <el-input v-model="props.row.hintMsg" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </Dialog>
    <!-- 分组管理 -->
    <Dialog v-model="showGroupDialog" :title="groupDialogTitle" :loading="submitLoading" :width="500"
      @confirm="submitGroupForm">
      <el-form ref="groupFormRef" :model="groupFormData" :rules="rules" label-width="120px">
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="groupFormData.name" type="text" placeholder="请输入分组名称" clearable maxlength="30"
            :show-word-limit="true" />
        </el-form-item>
        <el-form-item label="所属上级">
          <TreeSelect v-model="groupFormData.parentId" :tree-select-data="parentTreeSelectData"
            :expand-on-click-node="false" :check-strictly="true" :tree-props="{ label: 'name' }" placeholder="所属上级非必填" />
        </el-form-item>
        <el-form-item label="是否有下级分组" prop="exit">
          <el-radio-group v-model="groupFormData.nodeType" :disabled="groupFormData['id']">
            <el-radio :label="1">
              是
            </el-radio>
            <el-radio :label="0">
              否
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
    <previewActDialog v-model:show="showPreviewActDialog" v-model:id="currentPreviewActId" @confirm="sureCustomer" />
    <!-- 上线审核弹窗 -->
    <AuditDialog v-model:show="showAuditDialog" v-model="auditForm" :title="`【${auditForm.relationName}】上线审核`"
      @confirm="search" />
    <!-- 批量修改分组 -->
    <Dialog v-model="setGroupDialog" :title="`选择分组`" :width="500">
      <el-form ref="formRef" :model="batchGroupForm" :rules="rules" label-width="auto" label-position="top">
        <el-form-item label="分组" prop="nodeId">
          <TreeSelect v-model="batchGroupForm.groupId" :tree-select-data="treeSelectData" :expand-on-click-node="false"
            :check-strictly="true"
            :tree-props="{ label: 'name', disabled: ((data: any) => { return data.nodeType === 1 }) }"
            placeholder="请选择分组" />
        </el-form-item>
      </el-form>
    </Dialog>
    <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="活动列表"
      export-type="activityInfoExport" />

    <!-- 通知配置 -->
    <NoticeConfigDialog v-model:showNotice="showNotice" :current-act-info="currentRowInfo" />

    <!-- 审核详情 -->
    <AuditDetail v-model:dialog-form-visible="auditVisible" :current-act-info="currentRowInfo" />
    <!-- 测试名单 -->
    <testCustomerDialog v-model:show="showTestCustomerDialog" :id="testCustomerId" />
  </div>
</template>
<style lang="scss" scoped>
.side-title-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.content {
  :deep(.all-content) {
    .white {
      .content-slot-bg {
        overflow: unset;
      }
    }
  }
}

.toolBar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.activity-card {
  .activity-item {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;

    :deep(.el-card__body) {
      padding: 0;
    }

    &.activity-create {
      height: 100%;

      :deep(.el-card__body) {
        height: 100%;
      }

      .create-btn {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        div {
          margin-top: 10px;
        }
      }
    }

    .activity-img {
      position: relative;
      overflow: hidden;
      height: 0;
      padding-bottom: 130%;
      cursor: pointer;

      &_container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        :deep(.el-image) {
          >img {
            display: block;
            width: 100%;
            height: auto;
          }
        }
      }

      .activity-qrcode {
        position: absolute;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.4);
        transition: top 0.3s ease-out;

        .preview-btn {
          color: #ffffff;
          width: 120px;
          line-height: 40px;
          border-radius: 20px;
          border: 1px solid #ffffff;
          text-align: center;
          cursor: pointer;
        }

        .footer {
          color: #ffffff;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .footer-item {
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            padding: 10px;

            .el-dropdown {
              color: #ffffff;
            }
          }
        }
      }

      &:hover {
        .activity-qrcode {
          top: 0;
        }
      }
    }

    .activity-info {
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px 20px;
      text-align: left;
      font-size: 14px;

      &_line1 {
        display: flex;
        align-items: center;
      }

      .activity-name {
        width: 0;
        flex: 1;
        line-height: 32px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
